<template>
  <div>
    <div class="app-container">
      <el-card shadow="hover" class="container-card">
        <template #header>订单管理</template>
        <el-form ref="searchFormData" :model="searchFormData" label-width="90px">
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item label="订单编号">
                <el-input v-model="searchFormData.id" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态">
                <el-select
                  v-model="searchFormData.status"
                  placeholder="请选择"
                  clearable
                  style="width:100%"
                >
                  <el-option
                    v-for="item in orderStatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付费状态">
                <el-select
                  v-model="searchFormData.paymentStatus"
                  placeholder="请选择"
                  clearable
                  style="width:100%"
                >
                  <el-option
                    v-for="item in paymentStatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发件人姓名">
                <el-input v-model="searchFormData.senderName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发件人电话">
                <el-input v-model="searchFormData.senderPhone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发件人地址 " class="sender">
                <el-select
                  v-model="searchFormData.senderProvinceId"
                  placeholder="请选择省"
                  clearable
                  value-key="id"
                  @change="getSenderProvince"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select
                  v-model="searchFormData.senderCityId"
                  placeholder="请选择市"
                  clearable
                  @change="getCity"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select
                  v-model="searchFormData.senderCountyId"
                  placeholder="请选择区"
                  clearable
                  @change="getArea"
                >
                  <el-option
                    v-for="item in countryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人姓名">
                <el-input v-model="searchFormData.receiverName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人电话">
                <el-input v-model="searchFormData.receiverPhone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收件人地址 " class="receiver">
                <el-select
                  v-model="searchFormData.receiverProvinceId"
                  placeholder="请选择省"
                  clearable
                  @change="getProvinceReceiver"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select
                  v-model="searchFormData.receiverCityId"
                  placeholder="请选择市"
                  clearable
                  @change="getReceiverCity"
                >
                  <el-option
                    v-for="item in receiverCityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-select
                  v-model="searchFormData.receiverCountyId"
                  placeholder="请选择区"
                  clearable
                  @change="getReceiverArea"
                >
                  <el-option
                    v-for="item in countryReceiverList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="search('搜索')">搜索</el-button>
              <el-button @click="resetForm('searchFormData')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div
        style="margin-top: 20px"
      >
        <el-card class="tale-card-box">
          <el-table
            :data="dataList"
            border
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.$index +
                    (searchFormData.page - 1) *
                    searchFormData.pageSize +
                    1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单编号"
              width="200"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="运单编号"
              width="200"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.transportOrder === null
                    ? ''
                    : scope.row.transportOrder.id
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="下单时间"
              width="200"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单状态"
              width="80"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status == ' 23000'">待取件</span>
                <span v-else-if="scope.row.status == '23001'">已取件</span>
                <span v-else-if="scope.row.status == '23002'">网点自寄</span>
                <span v-else-if="scope.row.status == '23003'">网点入库</span>
                <span v-else-if="scope.row.status == '23004'">待装车</span>
                <span v-else-if="scope.row.status == '23005'">运输中</span>
                <span v-else-if="scope.row.status == '23006'">网点出库</span>
                <span v-else-if="scope.row.status == '23007'">待派送</span>
                <span v-else-if="scope.row.status == '23008'">派送中</span>
                <span v-else-if="scope.row.status == '23009'">已签收</span>
                <span v-else-if="scope.row.status == '23010'">拒收</span>
                <span v-else>已取消</span>
              </template>
            </el-table-column>
            <el-table-column
              label="发件人姓名"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.senderName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="发件人电话"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.senderPhone }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="发件人地址"
              width="200"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.senderProvince === null
                    ? ''
                    : scope.row.senderProvince.name
                }}</span>
                <span>{{
                  scope.row.senderCity === null ? '' : scope.row.senderCity.name
                }}</span>
                <span>{{
                  scope.row.senderCounty === null
                    ? ''
                    : scope.row.senderCounty.name
                }}</span>
                <span>{{ scope.row.senderAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="收件人姓名"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="收件人电话"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverPhone }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="收件人地址"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.receiverProvince === null
                    ? ''
                    : scope.row.receiverProvince.name
                }}</span>
                <span>{{
                  scope.row.receiverCity === null
                    ? ''
                    : scope.row.receiverCity.name
                }}</span>
                <span>{{
                  scope.row.receiverCounty === null
                    ? ''
                    : scope.row.receiverCounty.name
                }}</span>
                <span>{{ scope.row.receiverAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="取件类型"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.pickupType == 1">网点自寄</span>
                <span v-else>上门取件</span>
              </template>
            </el-table-column>
            <el-table-column
              label="付费类型"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentMethod == 1">预结</span>
                <span v-else>到付</span>
              </template>
            </el-table-column>
            <el-table-column
              label="付费状态"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentStatus == 1">未付</span>
                <span v-else>已付</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
            >
              <template slot-scope="scope">
                <el-link
                  v-if="
                    scope.row.status == '23002' && scope.row.pickupType == 1
                  "
                  type="primary"
                  :underline="false"
                  @click="handleOrderDetail(scope.row.id, scope.row.pickupType)"
                >编辑详情</el-link>
                <el-link
                  v-else
                  type="primary"
                  :underline="false"
                  @click="
                    handleOrderDetail(
                      scope.row.id,
                      scope.row.status,
                      scope.row.pickupType,
                      scope.row.transportOrder === null
                        ? ''
                        : scope.row.transportOrder.id
                    )
                  "
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <div
              v-show="dataList && dataList.length > 0"
              class="pages"
            >
              <el-pagination
                :current-page="Number(searchFormData.page)"
                :total="Number(total)"
                :page-size="Number(searchFormData.pageSize)"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import options from '@/api/orderstatus.json'
import { getOrderList } from '@/api/order'
import { getCityList } from '@/api/base'
// import { areaList } from '@/api/common'
export default {
  data() {
    return {
      orderId: '',
      multipleSelection: [],
      provinceList: [],
      cityList: [],
      countryList: [],
      countryReceiverList: [],
      receiverCityList: [],
      orderStatus: '',
      pickUpTypeOptions: '',
      paymentStatus: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      dataList: [],
      total: null,
      // TODO
      listLoading: true,
      searchFormData: {
        page: 1,
        pageSize: 10,
        id: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: '',
        status: '',
        pickUpType: '',
        // 收件人地址id
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        // 发件人地址id
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        paymentStatus: ''
      },
      requestParamsProvince: {}
    }
  },
  created() {
    this.orderStatus = options
    // 初始化数据
    this.initData()
    this.showcity()
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    // 初始化数据
    async initData() {
      this.getList()
    },
    // 获取列表数据
    async getList() {
      const result = await getOrderList(this.searchFormData)
      // console.log(result)
      this.dataList = result.items
      this.total = result.counts
    },
    // 获取省
    async showcity() {
      this.requestParamsProvince.parentId = 0
      const result = await getCityList(this.requestParamsProvince)
      this.provinceList = result
      console.log(result)
    },
    // 获取发件人地址
    async getSenderProvince(vId) {
      if (this.searchFormData.senderProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.searchFormData.senderProvinceId
        const result = await getCityList(this.requestParamsProvince)
        this.cityList = result
        console.log(result)
      }
      // 重置市区
      this.searchFormData.senderCityId = ''
      // 新添加的
      this.searchFormData.senderCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.provinceList.find((item) => {
          return item.id === vId
        })
        this.searchFormData.senderProvinceId = obj.id
      }
    },
    // 获取发件人县区
    async getCity() {
      if (this.searchFormData.senderProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.searchFormData.senderCityId
        const result = await getCityList(this.requestParamsProvince)
        this.countryList = result
        this.searchFormData.senderCountyId = ''
        console.log(result)
      }
    },
    // 获取市区ID
    getSenderCity(vId) {
      this.searchFormData.senderCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.cityList.find((item) => {
          return item.id === vId
        })
        this.getCity()
        this.searchFormData.senderCityId = obj.id
      }
    },
    // 新增县地址
    getArea() {
      if (this.searchFormData.senderCountyId !== '') {
        let obj = {}
        obj = this.countryList.find((item) => {
          return item.id === this.searchFormData.senderCountyId
        })
        this.searchFormData.senderCountyId = obj.id
      }
    },
    // 获取收件人地址
    async getProvinceReceiver(vId) {
      if (this.searchFormData.receiverProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.searchFormData.receiverProvinceId
        const result = await getCityList(this.requestParamsProvince)
        this.receiverCityList = result
      }
      this.searchFormData.receiverCityId = ''
      this.searchFormData.receiverCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.provinceList.find((item) => {
          return item.id === vId
        })
        this.searchFormData.receiverProvinceId = obj.id
      }
    },
    // 获取收件人县区
    async receiverCity() {
      if (this.searchFormData.receiverProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.searchFormData.receiverCityId
        const result = await getCityList(this.requestParamsProvince)
        this.countryReceiverList = result
        this.searchFormData.receiverCountyId = ''
      }
    },
    // 获取市区id
    getReceiverCity(vId) {
      this.searchFormData.receiverCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.receiverCityList.find((item) => {
          return item.id === this.searchFormData.receiverCityId
        })
        this.receiverCity()
        this.searchFormData.receiverCityId = obj.id
      }
    },
    // 新增县地址
    getReceiverArea() {
      if (this.searchFormData.receiverCountyId !== '') {
        let obj = {}
        obj = this.countryReceiverList.find((item) => {
          return item.id === this.searchFormData.receiverCountyId
        })
        this.searchFormData.receiverCountyId = obj.id
      }
    },
    // 重置功能
    // 重置
    resetForm(formData) {
      // this.getList()
      this.$refs[formData].resetFields()
      this.cityList = {}
      this.searchFormData.page = 1
      this.searchFormData.pageSize = 10
      this.searchFormData.id = ''
      this.searchFormData.status = ''
      this.searchFormData.paymentStatus = ''
      this.searchFormData.senderName = ''
      this.searchFormData.senderPhone = ''
      this.searchFormData.receiverName = ''
      this.searchFormData.receiverPhone = ''
      this.searchFormData.receiverCityId = ''
      this.searchFormData.receiverCountyId = ''
      this.searchFormData.receiverProvinceId = ''
      this.searchFormData.senderProvinceId = ''
      this.searchFormData.senderCityId = ''
      this.searchFormData.senderCountyId = ''
      this.getList()
    },
    search(opt) {
      // this.searchFormData = {
      //   ...this.searchFormData,
      //   status: this.searchFormData === 0 ? '' : this.searchFormData.status,
      //   page: opt === '搜索' ? 1 : this.searchFormData.page
      // }
      // console.log(this.searchFormData)
      this.searchFormData.page = 1
      this.getList(this.searchFormData)
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.searchFormData.pageSize = val
      if (this.searchFormData.page === 1) {
        this.getList(this.searchFormData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.searchFormData.page = val
      this.getList()
    },
    // 进入订单详情
    handleOrderDetail(id, status, pickupType, transportOrderId) {
      this.$router.push({
        path: '/business/edit-order',
        query: { orderId: id, status: status, pickUpType: pickupType, transportOrderId }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container{
  .el-link{
  color:#419eff;
  }
  .container-card{
    .sender{
     .el-select{
      width:30%;
      margin-right: 8px;
    }
  }
  .receiver{
    .el-select{
      width:30%;
      margin-right: 8px;
    }
  }
    }
  .tale-card-box{
    .pagination{
       margin: 22px auto;
       text-align: center;
       span {
          font-size: 14px !important;
          color: #20232a !important;
       }
    }
  }
  :deep(.el-table__body-wrapper) {
    &::-webkit-scrollbar{
     background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
     border-radius: 10px;
     border: 4px solid #fff;
     background-color: #dddee0;
    }
   }
}
</style>
